<template>
  <div class="weui-tabbar">
    <div v-for="(item, index) of tabs" :key="index" class="weui-tabbar__item">
      <router-link :to="taburls[item.tokey]" :class="{'weui-bar__item_on': index === curtab}">
          <img :src="item.imgsrc" alt="" class="weui-tabbar__icon" :srcset="item.imgsrcset">
          <p class="weui-tabbar__label">{{item.text}}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyTabBar',
  props: {
    curtab: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      tabs: [{
        imgs1: [require('imgs/首页1.png'), require('imgs/首页1@2x.png'), require('imgs/首页1@3x.png')],
        imgs2: [require('imgs/首页2.png'), require('imgs/首页2@2x.png'), require('imgs/首页2@3x.png')],
        tokey: 'index',
        text: '报修'
      }, {
        imgs1: [require('imgs/我的.png'), require('imgs/我的@2x.png'), require('imgs/我的@3x.png')],
        imgs2: [require('imgs/我的2.png'), require('imgs/我的2@2x.png'), require('imgs/我的2@3x.png')],
        tokey: 'tab2',
        text: '我的'
      }],
      roletype: '',
      taburls: ''
    }
  },
  created () {
    var imgtab0, imgtab1
    if (this.curtab === 0) {
      imgtab0 = this.tabs[0].imgs1
      imgtab1 = this.tabs[1].imgs2
    } else {
      imgtab0 = this.tabs[0].imgs2
      imgtab1 = this.tabs[1].imgs1
    }
    this.tabs[0].imgsrc = imgtab0[0]
    this.tabs[0].imgsrcset = this.cm.srcsetstr(imgtab0[1], imgtab0[2])
    this.tabs[1].imgsrc = imgtab1[0]
    this.tabs[1].imgsrcset = this.cm.srcsetstr(imgtab1[1], imgtab1[2])

    this.roletype = localStorage.roletype ? localStorage.roletype : '1'
    this.taburls = this.cm.getTabUrl(this.roletype)
  }
}
</script>

<style lang="stylus" scoped>
.weui-tabbar__item
  padding 4px 0 0
  display flex
  justify-content center
  align-items center
.weui-bar__item_on
  p
    color black
</style>
